 <script setup lang='ts'>
  import { nextTick, onMounted, reactive, ref } from 'vue';
  import { activeStatus, rankingType, rankingID, rankingTypeArr, rankingDayArr, giftList } from '@/pinia/getter';
  import { getAssetsFile, xmloading, gopage } from '@/utils/public';
  import request from '@/api/index';
  import giftListBox from '@/components/giftListBox.vue';
  import tabsList from '@/components/tabsList.vue';
  import typeTab from '@/components/typeTab.vue';
  import rankingInfo from './info.vue';
  import contribute from './contribute.vue';
  import propTips from './propTips.vue';
  const contributeRef = ref(),
  propTipsRef = ref()
  const action = reactive({
    tabberType:1, // 榜单类型
    listTabType:1, // 榜单日期类型 1 日榜 2总榜
    rankingTypeItem:rankingTypeArr.value.find(res=>res.key == rankingType.value) || { if_day:2, if_all:2, title:'',score_rule:0 }, // 是否有总榜
    dayTimeKey:0, // 日期key
    oldDayTimeKey:0, 
    dayArr:[] as Array<any>, // 日期列表
    dayTime:'', // 选中日期时间戳
    oldDayTime:'',
    list:[] as Array<any>, // 榜单列表
    reward_info:{
      status:0, // 领取状态  0暂无可领取 1待领取
      rank_num:0, // 名次
      rewardInfoList:[] // 奖励信息
    }, // 用户Top信息
    // 当前用户榜单信息
    user_info:{
      num:0,
      points:0,
      needsocre:0,
      richUserList:[] as Array<any>,
    },
    footerUserInfo:false, // 是否显示榜单底部用户信息
    showMoreBut:false, // 是否加载更多
    showDateTab:false, // 是否显示榜单日期切换
  })
  const listQuery = reactive({
    page:1,
    limit:20,
  })
  const rankingTab = [
    {key:1,name:'日榜'},
    {key:2,name:'总榜'},
  ]
  /**
   * 打开领取奖励弹窗
   */
  const openPropTips = ()=>{
    propTipsRef.value.openDialog({
      ymd:action.dayTime,
      reward_info:action.reward_info
    })
  }
  /**
   * 打开贡献榜
   * @param query 
   */
   const openContributor = (query:any={})=>{
    contributeRef.value.openDialog({
      ...query,
      ymd:action.dayTime
    })
  }
  /**
   * 榜单切换
   */
  const handleTabber = (item:any = [])=>{
    const { key, if_day=2, if_all=2, title='', score_rule=0 } = item
    action.rankingTypeItem = {
      if_day,
      if_all,
      title,
      score_rule
    }
    action.footerUserInfo = [1,2,5].indexOf(key) > -1 ? true : false
    action.showDateTab = [1,2].indexOf(key) > -1 ? true : false
    if(if_day == 2 && if_all == 1) {
      handlelistTab(2)
    } else {
      handlelistTab(1)
    }
  }
  /**
   * 榜单类型切换
   */
  const handlelistTab = (key:number = 1)=>{
    action.listTabType = key
    if(key == 1) {
      action.dayTimeKey = action.oldDayTimeKey
      action.dayTime = action.oldDayTime
    }
    if(key == 2) {
      action.dayTime = 'all'
    }
    removeListQuery()
  }
  const integerTime = (time:any = new Date())=>{
    time.setHours(0)
    time.setMinutes(0)
    time.setSeconds(0)
    time.setMilliseconds(0)
    return time
  }
  let selectSet = false
  const filtersDayFont = ()=>{
    nextTick(()=>{
      if(action.rankingTypeItem.if_day == 1) {
        const newDataTime = integerTime()
        action.dayArr = rankingDayArr.value.map((time,index) => {
          const currentTime = integerTime(new Date(time))
          if(activeStatus.value == 2) {
            if(index == rankingDayArr.value.length - 1) {
              return selectDay(time,index,`第${index+1}天`)
            }
          } else if(newDataTime.getTime() == currentTime.getTime()) {
            return selectDay(time,index)
          }
          return {
            time,
            title:`第${index+1}天`
          }
        })
        if(!selectSet) {
          selectDay(rankingDayArr.value[0],0,'第1天`')
        }
      } else {
        action.dayTime = 'all'
        action.oldDayTime = 'all'
      }
      handleTabber(action.rankingTypeItem)
    })
  }
  const selectDay = (time:any,index:any,title='今天')=>{
    action.dayTimeKey = index
    action.oldDayTimeKey = index
    action.dayTime = rankingDayArr.value[index]
    action.oldDayTime = rankingDayArr.value[index]
    selectSet = true
    return {
      time,
      title
    }
  }
  const handlemore = ()=>{
    listQuery.page += 1
    getList()
  }
  const dayTabsChange = ()=>{
    action.dayTime = rankingDayArr.value[action.dayTimeKey]
    removeListQuery()
  }
  const removeListQuery = ()=>{
    listQuery.page = 1
    action.list = []
    getList()
  }
  const getList = async()=>{
    const loading = xmloading()
    let userinfoObj = {
      num:0,
      points:0,
      needsocre:0,
      richUserList:[] as Array<any>
    }
    let showMoreBut = true
    const res = await request.bankList({
      ...listQuery,
      ymd:action.dayTime,
      rank_id:rankingID.value
    })
    const { user_info={}, data_list=[], reward_info={} } = res?.data || {}
    // 日榜
    if([1,2,5].indexOf(rankingType.value) > -1) {
      action.reward_info = reward_info
      userinfoObj = user_info
    }else {
      action.reward_info = {
        status:0, // 领取状态  0暂无可领取 1待领取
        rank_num:0, // 名次
        rewardInfoList:[] // 奖励信息
      }
    }
    loading.close()
    if(data_list.length < listQuery.limit) showMoreBut = false
    action.showMoreBut = showMoreBut
    action.user_info = userinfoObj
    action.list = [...action.list, ...data_list]
  }
  onMounted(()=>{
    filtersDayFont()
  })
 </script>
 <template>
   <div class="rankingBox">
      <!-- 榜单奖励礼物 -->
      <giftListBox :giftList="giftList" titleImage="ranking/titleimg1.png" />
      <!-- 榜单类型 -->
      <div class="overflowTab">
        <tabsList
          v-model:tabs-key="rankingType"
          v-model:rank_id="rankingID"
          :tabs="rankingTypeArr"
          @change="handleTabber"
        />
      </div>
      <div class="rankingListBack">
        <!-- 日榜、总榜 -->
        <div
          v-if="action.rankingTypeItem.if_all == 1 && action.rankingTypeItem.if_day == 1"
          class="rankingType">
          <typeTab :tabs="rankingTab" @change="handlelistTab" />
        </div>
        <!-- 日期切换 -->
        <van-tabs
          v-if="action.listTabType == 1 && action.rankingTypeItem.if_day == 1"
          v-model:active="action.dayTimeKey"
          @change="dayTabsChange"
        >
          <van-tab
            v-for="(item,index) in action.dayArr"
            :key="index"
            :title="item.title"/>
        </van-tabs>
        <div class="rankingListCont">
          <!-- top用户领取奖励 -->
          <div
            v-if="action.reward_info.status == 1"
            class="rewardTips flex-align-between"
          >
            <span>恭喜您获{{ action.rankingTypeItem.title }}{{ rankingTab.find(res=> res.key == action.listTabType)?.name || '' }}榜单第{{ ['','一','二','三'][action.reward_info.rank_num] }}名</span>
            <xmimg @click="openPropTips" class="butImage" src="ranking/butImg2.png" />
          </div>
          <!-- 榜单列表 -->
          <div
            class="listbox"
          >
            <template v-if="action.list.length > 0">
              <template v-for="(item,index) in action.list">
                <rankingInfo
                  :user_info="item"
                  :score_rule="action.rankingTypeItem.score_rule"
                  @contributor="openContributor(item)"
                />
              </template>
              <xmimg
                v-if="action.showMoreBut"
                src="ranking/moreBut.png"
                class="butimg"
                @click="handlemore"
              />
            </template>
            <div v-else class="listEmptyTips">
              <xmimg src="ranking/listNoneIcon.png" class="tipsIconImg" />
              <span>暂无数据</span>
            </div>
          </div>
          <!-- 用户信息 -->
          <div v-show="action.footerUserInfo" class="footerUser">
            <rankingInfo
              myinfo
              :user_info="action.user_info"
              :score_rule="action.rankingTypeItem.score_rule"
              @contributor="openContributor(action.user_info)"
            >
              <template v-if="rankingType == 2" #ticket>
                <div @click="gopage('ticket')" class="ticket flex-align">
                  <xmimg src="ranking/icon4.png" class="iconImage" />
                  <span>查看详情</span>
                </div>
              </template>
              <template #right>
                <div
                  v-show="action.user_info.needsocre && action.list.length > 0"
                  class="needsocre">
                  距离上一名差<span>{{ action.user_info.needsocre }}</span>{{ ['','钻石','人气票'][rankingType] || '' }}
                </div>
              </template>
            </rankingInfo>
          </div>
        </div>
      </div>
    </div>
    <contribute ref="contributeRef" />
    <propTips ref="propTipsRef" @change="removeListQuery" />
 </template>
 
 <style lang='scss' scoped>
  .rankingBox {
    padding: var(--rankingPaddingTop) var(--rankingBoxPaddingX) 60px;
    box-sizing: border-box;
  }
  :deep(.tabsList) {
    margin-bottom: var(--rannkingTabsBottom);
    img {
      height: 40px;
    }
  }
  :deep(.giftListBack) {
    background-image: var(--rankingGiftBackImage) ;
    .giftList .giftBox {
      .name {
        color: var(--rankingGiftNameColor);
      }
      .price span {
        color: var(--rankingGiftNameColor);
      }
    }
  }
  .overflowTab::-webkit-scrollbar {
    display: none;
  }
  .overflowTab {
    overflow-y: hidden;
    overflow-x: auto;
    margin-top: 20px;
  }
  .rankingListBack {
    width: 100%;
    background: var(--rannkingBackColor);
    border-radius: 20px;
    border: 1px solid var(--rannkingBackBorderColor);
    display: flex;
    flex-direction: column;
    .rankingType {
      width: 100%;
      padding: 8px 0;
      border-radius: 19px 19px 0 0;
      background: var(--rannkingTypeBackColor);
      .typeTab {
        margin: 0 auto;
      }
    }
    :deep(.van-tabs) {
      padding: 16px 8px 0 16px;
      box-sizing: border-box;
      .van-tabs__nav {
        background: none;
      }
      .van-tabs__line {
        display: none;
      }
      .van-tabs__wrap {
        height: max-content;
      }
      .van-tabs__nav--line {
        padding:0;
      }
      .van-tab {
        width: 59px;
        min-width: 59px;
        max-width: 59px;
        height: 32px;
        margin-right: 6px;
        padding: 0;
        box-sizing: border-box;
        transition: background-image .28s;
        background: var(--dayFontBackImage) left top / 100% 100% no-repeat;
        .van-tab__text {
          color: var(--dayFontColor);
          font-size: 14px;
          font-weight: 500;
        }
      }
      .van-tab--active {
        border:none;
        background-image: var(--dayFontSelectBackImage);
        .van-tab__text {
          color: var(--daySelectFontColor);
        }
      }
    }
    .rankingListCont {
      position: relative;
      flex:1;
      padding: 16px 15px 0;
      box-sizing: border-box;
      .listbox::-webkit-scrollbar {
        display: none;
      }
      .listbox {
        overflow-x: hidden;
        overflow-y: auto;
        width: 100%;
        min-height: 100vh;
        max-height: 100vh;
        padding: 0 0 92px;
        box-sizing: border-box;
        :deep(.rankingInfoBack) {
          margin-bottom: 8px;
        }
        .butimg {
          width: 80px;
          height: 26px;
          margin: 15px auto 0;
        }
        .listEmptyTips{
          span {
            color: var(--listEmptyTipsFontColor);
          }
        }
      }
      .rewardTips {
        width: 100%;
        height: 32px;
        margin-bottom: 16px;
        padding: 2px 2px 2px 20px;
        box-sizing: border-box;
        background: var(--topBackColor);
        border-radius: 20px;
        span {
          color: var(--topFontColor);
          font-size: 14px;
          font-weight: 600;
        }
        .butImage {
          width: 82px;
          height: 28px;
        }
      }
      .footerUser {
        z-index: 10;
        position: absolute;
        left: -1px;
        bottom: -1px;
        width: calc(100% + 2px);
        :deep(.rankingInfoBack) {
          width: 100%;
          height: 100%;
          background-image: var(--rankingMyUserInfoBackImage);
          .price {
            background: var(--userPriceNumBackColor);
            span {
              color: var(--userPriceNumFontColor);
            }
          }
        }
        .ticket {
          width: max-content;
          margin-top: 4px;
          padding: 2px 5px 3px 4px;
          box-sizing: border-box;
          background: var(--ticketInfoButBack);
          border-radius: 9px;
          .iconImage {
            width: 12px;
            height: 12px;
            margin-right: 1px;
          }
          span {
            color: var(--ticketInfoButFontColor);
            font-weight: 400;
            font-size: 10px;
          }
        }
      }
    }
  }
 </style>